import React from 'react';
import { Button, Col, Row, Typography } from 'antd';
import { useTranslation } from 'react-i18next';
import './AppBar.css';

export interface AppBarProps {
	username: string;
	title?: string;
	onLogoutButtonClicked: () => void;
}

export default function AppBar(props: AppBarProps) {
	const {t} = useTranslation();

	return (
		<Row>
			<Col>
				<Typography>{props.title}</Typography>
			</Col>
			<Col flex={'auto'}/>
			<Col>
				<Typography>{t('text-toast', {name: props.username})}</Typography>
			</Col>
			<Col>
				<Button type={'link'} block onClick={props.onLogoutButtonClicked}>{t('button-logout')}</Button>
			</Col>
		</Row>
	);
}
